<template>
  <Form ref="addForm"
        :model="userForm"
        :rules="ruleValidate"
        :label-width="100">
    <Divider>基本信息</Divider>
    <Row>
      <Col span="12">
      <FormItem label="姓名"
                prop="realname">
        <Input v-model="userForm.realname"
               placeholder="请输入真实姓名"
               style="width: 200px;"
               clearable />
      </FormItem>
      <FormItem label="手机号码"
                prop="phone">
        <Input v-model="userForm.phone"
               placeholder="请输入手机号码"
               style="width: 200px;"
               clearable />
      </FormItem>
      <FormItem label="性别">
        <Select v-model="userForm.sex"
                style="width:200px">
          <Option v-for="item in cityList"
                  :value="item.value"
                  :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="出生日期">
        <DatePicker v-model="userForm.birthdayStr"
                    type="date"
                    @on-change="changeBirthday"
                    placeholder="出生日期"
                    style="width: 200px"></DatePicker>
        {{ages(userForm.birthday) || 0}}岁
      </FormItem>
      <FormItem label="身高">
        <Input v-model="userForm.bodyHeight"
               placeholder="请输入身高"
               style="width: 200px;"
               clearable>
        <div slot="append">CM</div>
        </Input>
      </FormItem>
      <FormItem label="体重">
        <Input v-model="userForm.weight"
               placeholder="请输入体重"
               style="width: 200px;"
               clearable>
        <div slot="append">KG</div>
        </Input>
      </FormItem>
      </Col>
      <Col span="12">
      <FormItem label="所属场馆"
                prop="storeId">
        <Select v-model="userForm.storeId"
                :disabled="userInfo.storeId ? true : false"
                style="width:200px"
                clearable>
          <Option v-for="(item, index) in storeIdList"
                  :key="index"
                  :value="item.id">{{item.storeName}}</Option>
        </Select>
      </FormItem>
      <FormItem label="职业">
        <Input v-model="userForm.occupation"
               placeholder="请输入职业"
               style="width: 200px;"
               clearable />
      </FormItem>
      <FormItem label="客户来源">
        <Select v-model="userForm.resource"
                style="width:200px">
          <Option v-for="(item, index) in source"
                  :value="item"
                  :key="index">{{ item }}</Option>
        </Select>
      </FormItem>
      <FormItem label="工作地点">
        <Input v-model="userForm.workAddress"
               clearable
               maxlength="100"
               show-word-limit
               type="textarea"
               placeholder="请输入工作地点"
               style="width: 200px" />
      </FormItem>
      <FormItem label="住址">
        <Input v-model="userForm.homeAddress"
               clearable
               maxlength="100"
               show-word-limit
               type="textarea"
               placeholder="请输入家庭住址"
               style="width: 200px" />
      </FormItem>
      <FormItem label="备注">
        <Input v-model="userForm.remarks"
               clearable
               maxlength="100"
               show-word-limit
               type="textarea"
               placeholder="请输入备注"
               style="width: 200px" />
      </FormItem>
      </Col>
      </Col>
    </Row>
  </Form>
</template>

<script>
import { addMembers } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  name: 'entry',
  props: {
    storeIdList: { // 场馆列表
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      userForm: {
        realname: '',
        phone: '',
        sex: '0',
        birthday: '',
        birthdayStr: '',
        bodyHeight: '',
        weight: '',
        occupation: '',
        workAddress: '',
        homeAddress: '',
        resource: '',
        storeId: '',
        remarks: ''
      },
      ruleValidate: {
        realname: [{ required: true, message: '请输入输姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
      },
      cityList: [
        {
          value: '1',
          label: '男'
        },
        {
          value: '0',
          label: '女'
        }],
      source: ['美团', '口碑', '转介绍', '自来网络', '地推', '其他']
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created () {
    if (this.userInfo.storeId) {
      this.$set(this.userForm, 'storeId', this.userInfo.storeId)
    }
  },
  methods: {
    onMemberSubmit () {
      this.$refs['addForm'].validate(valid => {
        // eslint-disable-next-line no-useless-return
        if (!valid) return
        addMembers(this.userForm).then(res => {
          this.$refs['addForm'].resetFields()
          this.$Message.success('添加成功')
          this.$emit('addStaffModel', false)
        })
      })
    },
    resetFields () {
      this.$refs['addForm'].resetFields()
    },
    changeBirthday (e) {
      this.userForm.birthday = e
    },
    ages (str) {
      var birthday = new Date(str.replace(/-/g, '\/'))
      var d = new Date()
      var age = d.getFullYear() - birthday.getFullYear() - ((d.getMonth() < birthday.getMonth() || d.getMonth() == birthday.getMonth() && d.getDate() < birthday.getDate()) ? 1 : 0)
      return age
    }
  }

}
</script>

<style scoped lang="scss">
.entry {
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: relative;
}
.title {
  font-size: 18px;
  font-weight: bold;
  padding: 30px 20px;
}
.nav {
  margin: 0 auto;
  position: relative;
  left: 30%;
}
.form-bar {
  width: 500px;
  margin: 20px auto;
}
.readMe {
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  left: 100px;
}
.margin-top-10 {
  margin-top: 10px;
}
.onSuccess {
  margin-top: 80px;
  font-size: 13px;
  font-weight: 500;
}
.upload-file {
  display: inline-block;
  width: 100px;
  height: 100px;
  vertical-align: middle;
  margin-right: 10px;
  border: 1px solid #0000;
}

.add-icon {
  position: relative;
  display: inline-block;
  border: 1px dashed #999;
  width: 100px;
  height: 100px;
  cursor: pointer;
  &::before {
    content: " ";
    position: absolute;
    width: 4px;
    height: 80%;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    background: #999;
  }
  &::after {
    content: " ";
    position: absolute;
    height: 4px;
    width: 80%;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    background: #999;
  }
}
.img-prev-items {
  display: inline-block;
  width: 100px;
  // height: 100px;
  vertical-align: middle;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.img-prev-items > img {
  width: 100%;
  height: 100%;
}
.remove {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0px;
  right: 0px;
  z-index: 9;
  overflow: hidden;
}
.disNone {
  display: none;
}
</style>
